<template>
  <div class="demo">
    <div class="demo-title">可交互</div>
    <div class="demo-content">
      <Typography.Paragraph v-model:content="editableStr" editable />
      <Typography.Paragraph v-model:content="customIconStr" editable>
        <template #editableIcon><HighlightOutlined /></template>
        <template #editableTooltip>click to edit text</template>
      </Typography.Paragraph>
      Trigger edit with:&nbsp;&nbsp;
      <Radio.Group
        :value="stateToRadio()"
        @change="(e) => (chooseTrigger = radioToState(e.target.value))"
      >
        <Radio value="icon">icon</Radio>
        <Radio value="text">text</Radio>
        <Radio value="both">both</Radio>
      </Radio.Group>
      <Typography.Paragraph
        v-model:content="clickTriggerStr"
        :editable="{ triggerType: chooseTrigger }"
      >
        <template #editableTooltip>click to edit text</template>
      </Typography.Paragraph>
      <Typography.Paragraph v-model:content="customEnterIconStr" editable>
        <template #editableIcon><HighlightOutlined /></template>
        <template #editableTooltip>click to edit text</template>
        <template #editableEnterIcon="{ className }">
          <CheckOutlined :class="className" />
        </template>
      </Typography.Paragraph>
      <Typography.Paragraph v-model:content="noEnterIconStr" editable>
        <template #editableIcon><HighlightOutlined /></template>
        <template #editableTooltip>click to edit text</template>
        <template #editableEnterIcon>{{ null }}</template>
      </Typography.Paragraph>
      <Typography.Paragraph v-model:content="hideTooltipStr" :editable="{ tooltip: false }" />
      <Typography.Paragraph
        v-model:content="lengthLimitedStr"
        :editable="{ maxlength: 50, autoSize: { maxRows: 5, minRows: 3 } }"
      />
      <Typography.Paragraph copyable>This is a copyable text.</Typography.Paragraph>
      <Typography.Paragraph :copyable="{ text: 'Hello, Ant Design!' }">
        Replace copy text.
      </Typography.Paragraph>
      <Typography.Paragraph copyable content="Custom Copy icon and replace tooltips text.">
        <template #copyableIcon="{ copied }">
          <SmileOutlined v-if="!copied" key="copy-icon" />
          <SmileFilled v-else key="copied-icon" />
        </template>
        <template #copyableTooltip="{ copied }">
          <span v-if="!copied" key="copy-tooltip">click here</span>
          <span v-else key="copied-tooltip">you clicked!!</span>
        </template>
      </Typography.Paragraph>
      <Typography.Paragraph :copyable="{ tooltip: false }">
        Hide Copy tooltips.
      </Typography.Paragraph>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import {
    HighlightOutlined,
    SmileOutlined,
    SmileFilled,
    CheckOutlined,
  } from '@ant-design/icons-vue';
  import Radio from '@sscd/radio';
  import Typography from '@sscd/typography';
  const editableStr = ref('This is an editable text.');
  watch(
    () => editableStr,
    () => console.log('editableStr', editableStr.value)
  );
  const chooseTrigger = ref<('icon' | 'text')[]>(['icon']);
  const radioToState = (input: string): ('icon' | 'text')[] => {
    switch (input) {
      case 'text':
        return ['text'];
      case 'both':
        return ['icon', 'text'];
      case 'icon':
      default:
        return ['icon'];
    }
  };
  const stateToRadio = () => {
    if (chooseTrigger.value.indexOf('text') !== -1) {
      return chooseTrigger.value.indexOf('icon') !== -1 ? 'both' : 'text';
    }
    return 'icon';
  };
  const customIconStr = ref('Custom Edit icon and replace tooltip text.');
  const hideTooltipStr = ref('Hide Edit tooltip.');
  const lengthLimitedStr = ref('This is an editable text with limited length.');
  const clickTriggerStr = ref('Text or icon as trigger - click to start editing.');
  const customEnterIconStr = ref('Editable text with a custom enter icon in edit field.');
  const noEnterIconStr = ref('Editable text with no enter icon in edit field.');
</script>
